/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-03-18 16:53:50
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-03-19 18:20:01
 * @FilePath: \react-demo\src\page\Month\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import _ from 'lodash';
import dayjs from "dayjs";
import classNames from "classnames";
import {  useMemo, useEffect } from "react";
import { useLocation } from 'react-router-dom';
import { NavBar, DatePicker } from 'antd-mobile';

import DailyBill from './components/DailyBill';
import TwoLineOverview from '@/components/TwoLineOverview';
import { useMonthBillList } from '@/hooks/useBillList';
import { useDate } from '@/hooks/useDate';
import { getOverview } from '@/contants';

import './index.scss';

const Month = () => {
  const { state } = useLocation();
  const { date, visible, onShowDate, onHideDate, onDateChange } = useDate();

  const selectedYear = date.get('year');
  const selectedMonth = date.get('month');
  const currentBillList = useMonthBillList(selectedYear, selectedMonth);
  const overview = getOverview(currentBillList);

  const monthBills = useMemo(
    () => {
      const billGroup = _.groupBy(currentBillList, item =>
        dayjs(item.date).format('YYYY-MM-DD')
      );
      const sortedKeys = _.orderBy(
        Object.keys(billGroup),
        // 转成日期数字，在进行比较
        item => +new Date(item),
        'desc'
      );
      return {
        keys: sortedKeys,
        billGroup,
      };
    },
    [currentBillList]
  );

  const renderMonthBills = () => {
    const { keys, billGroup } = monthBills;
    return keys.map(key => {
      const dateText = dayjs(key).format('MM月DD日');
      const overview = getOverview(billGroup[key]);

      return (
        <DailyBill
          key={key}
          overview={overview}
          dateText={dateText}
          billList={billGroup[key]}
        />
      )
    })
  };

  // 首次加载 当前月份统计数据显示
  useEffect(
    () => {
      if (state === null) return;
      onDateChange(state.date);
    },
    [state, onDateChange]
  );

  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date">
            <span className="text" onClick={onShowDate}>
              {selectedYear} | {selectedMonth + 1}月账单
            </span>
            <span className={classNames('arrow', visible && 'expand')}></span>
          </div>
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={visible}
            onClose={onHideDate}
            max={new Date()}
            onConfirm={onDateChange}
          />

          <TwoLineOverview
            pay={overview.pay}
            income={overview.income}
            type="month"
          />
        </div>
        {renderMonthBills()}
      </div>
    </div >
  )
}

export default Month;